<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY='false' />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<!--<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
		<!-- 日期选择框start -->
		<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
		<!-- 日期选择框end -->
		
		<!--基本选项卡start-->
		<script type="text/javascript" src="../../libs/js/nav/basicTabModern.js"></script>
		<!--基本选项卡end-->
		<style type="text/css">
			body {
				background: #F2F3F7;
			}
		</style>
	</head>

	<body>
		<div class="page_content">
			<div class="basicTabModern">
				<div name="支出录用" style="width:100%;">
					<div class="table_win">
						<div class="tab_content">
							<div class="top">
								<div class="icon_flat_rect">
								    <ul>
								        <li>
								            <img src="../../libs/icons/icon_flat/icon_img08.png" />
								            <div class="text">
								                <p>今日销售</p>
								                <p><span>¥ 1250</span></p>
								            </div>
								        </li>
								        <li style="background: #7CC422;">
								            <img src="../../libs/icons/icon_flat/icon_img09.png" />
								            <div class="text">
								                <p>本月销售</p>
								                <p><span>¥ 201250</span></p>
								            </div>
								        </li>
								        <li style="background: #FFA060;">
								            <img src="../../libs/icons/icon_flat/icon_img10.png" />
								            <div class="text">
								                <p>会员总数</p>
								                <p><span>3</span>个</p>
								            </div>
								        </li>
								        <li style="background: #FEC107;">
								            <img src="../../libs/icons/icon_flat/icon_img11.png" />
								            <div class="text">
								                <p>本月支出</p>
								                <p><span>¥ 23046</span></p>
								            </div>
								        </li>
								        <li style="background: #46D1E4;">
								            <img src="../../libs/icons/icon_flat/icon_img12.png" />
								            <div class="text">
								                <p>本月短信</p>
								                <p><span>25</span>条</p>
								            </div>
								        </li>
								        <li style="background: #60D0FE;">
								            <img src="../../libs/icons/icon_flat/icon_img13.png" />
								            <div class="text">
								                <p>商品总数</p>
								                <p><span>201250</span>个</p>
								            </div>
								        </li>
								        
								        <div class="clear"></div>
								    </ul>
								</div>
							</div>
							<div class="bottom">
								<div class="title">
									<span>
										本年度支出统计
									</span>
									<div class="clear"></div>
								</div>
								<div id="container" style="width: 98%; height: 400px;"></div>
							</div>
						</div>
					</div>
				</div>
				<div name="支出分析" style="width:100%;">
					敬请期待
				</div>
				<div name="支出明细" style="width:100%;">
					敬请期待
				</div>
				<div name="支出分类" style="width:100%;">
					敬请期待
				</div>
			</div>
			
		</div>
		<script>
			$(function() {
				$('#container').highcharts({
					chart: {
						zoomType: 'xy'
					},
					title: {
						text: '销售概览',
						style: {
							color: '#03A9F5'
						}
					},
					subtitle: {
						text:""
					},
					xAxis: [{
						categories: ['2016/03/07', '2016/03/11', '2016/03/15', '2016/03/19', '2016/03/23', '2016/03/27', '2016/03/31', '2016/04/04', '2016/04/07', '2016/04/12', '2016/04/17', '2016/04/22']
					}],
					yAxis: [ {
						title: {
							text: '',
							style: {
								color: ' '
							}
						},
						labels: {
							format: '{value}',
							style: {
								color: ''
							}
						},
						opposite: false
					}],
					tooltip: {
						shared: true
					},
					legend: {
						layout: 'vertical',
						align: 'left',
						x: 120,
						verticalAlign: 'bottom',
						y: 100,
						floating: true,
						backgroundColor: '#FFFFFF'
					},
					series: [ {
						name: '销售',
						type: 'column',
						data: [440, 490, 495, 345, 382, 415, 592, 565, 633, 683, 639, 720],
						color: '#03A9F5'
					}]
				});

			});
			var fixedObj=100;
			function customHeightSet(contentHeight,contentWidth){
			    $(".tab_content").height(contentHeight-fixedObj);
			}
		</script>
	</body>

</html>